<template>
  <div class="app">
    <el-card>
      <!-- 搜索栏 -->
      <div class="filter-bar">
        <div class="setmian">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            inline
          >
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
                placeholder="管理员账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input type="text" v-model="ruleForm.email" autocomplete="off" placeholder="管理员邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="options">
              <el-select v-model="ruleForm.status">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click.prevent="submitForm('ruleForm')">搜索</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" plain size="medium" @click="adduser">创建用户</el-button>
        </div>
      </div>
      <!-- 列表 -->
      <div>
        <el-table border :data="tableData" style="width: 100%" class="tab">
          <el-table-column label="管理员id" width="100" prop="id"></el-table-column>
          <el-table-column label="管理员姓名" width="100" prop="username"></el-table-column>
          <el-table-column label="手机号" width="120" prop="phone"></el-table-column>
          <el-table-column label="管理员邮箱" width="210" prop="email"></el-table-column>
          <el-table-column label="管理员头像" width="150">
            <template slot-scope="{row}">
              <img :src="`http://122.51.249.55:7005/${row.avatar}`" alt />
            </template>
          </el-table-column>
          <el-table-column label="管理员角色" width="150">
            <template slot-scope="{row}">
              <el-tag type="success" v-for="(item,index) in row.roles_names" :key="index">{{item}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" width="180" prop="created_at"></el-table-column>
          <el-table-column label="状态" width="70" prop>
            <template slot-scope="{row}">
              <el-switch
                v-model="row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                @change="toggleButton(row.id,row.status)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" prop>
            <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" circle @click="edituser(row.id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="delbtn(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formDeat.page"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="formDeat.limit"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="formDeat.total"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 添加编辑弹层 -->
    <Tables ref="tables" @tables="getuserList" :id="id"  />
    <!-- 上传图片弹出层 -->
    <!-- <Image ref="image" :dialogVisible='dialogVisible' /> -->
  </div>
</template>

<script>
import { getuserList, deluserItem, toggleButton } from "@/api/permission/users";
import Tables from "./components/tables";
// import Image from './components/image'
export default {
  name: "user",
  components: {
    Tables,
    // Image
  },
  data() {
    return {
      ruleForm: {
        username: "",
        email: "",
        status: null //下拉框数据
      },
      tableData: [], //页面数据
      //  分页器数据
      formDeat: {
        page: 1, //当前页
        total: 0, //总条数
        limit: 2
      },
      id: 0,
      // dialogVisible:false
    };
  },
  created() {
    //进入页面调用请求方法
    this.getuserList();
  },
  methods: {
    //调用请求，拿到数据渲染页面
    async getuserList() {
      const { data } = await getuserList({
        ...this.ruleForm,
        page: this.formDeat.page,
        limit: this.formDeat.limit
      });
      this.tableData = data.list;
      console.log(this.tableData);
      this.formDeat.total = data.total;
    },
    //每页条数发生变化时的回调函数
    handleSizeChange(val) {
      //每页条数发生变化时重新给分页器数据赋值
      this.formDeat.limit = val;
      //当每页条数发生变化调用搜索接口更新页面的数据
      this.getuserList();
    },
    //页码数发生变化时的回调函数
    handleCurrentChange(val) {
      this.formDeat.page = val;
      this.getuserList();
    },
    //开关状态
    async toggleButton(id, status) {
      console.log(10);
      await toggleButton({
        id: id,
        status: status
      });
      this.$message.success("更新状态成功");
    },
    //搜索功能
    async submitForm() {
      //点击搜索主动校验
      await this.$refs.ruleForm.validate();
      try {
        // 调用方法重新请求
        this.getuserList();
        //清空表单数据
        this.ruleForm = {
          username: "",
          email: "",
          status: null
        };
      } catch (err) {
        //捕捉错误
        console.log(err);
      }
    },
    //重置功能
    resetForm() {
      this.getuserList();
      this.ruleForm = {
        username: "",
        email: "",
        status: "全部"
      };
    },
    //删除功能
    async delbtn(id) {
      //询问
      try {
        await this.$confirm("确定删除么?");
        await deluserItem(id);
        //更新列表
        this.getuserList();
        this.$message.success("删除成功");
      } catch (err) {
        this.$message("已取消");
        console.log(err);
      }
    },
    //点击增加弹出框组件显示隐藏
    adduser() {
      this.$refs.tables.dialogVisible = true;
    },
    //编辑弹框
    edituser(id) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.tables.dialogVisible = true;
        }, 400);
      });
      this.$refs.tables.getuserItem(id);
      this.id = id;
    },
    // btnimage(){
    //  this.dialogVisible=true
    // }
  }
};
</script>

<style scoped >
.app {
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #eaedf1;
  padding: 20px;
}
.filter-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 16px;
}
.setmian {
  display: flex;
}
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
img {
  width: 80px;
  height: 80px;
}
</style>
